
// Helper text (Bootstrap 4 and bootstrap-vue-next)
.form-text,
.b-form-text {
  display: block;
  font-size: $form-label-font-size;
  line-height: $form-line-height;
  margin-top: calc(-1 * (#{$spacer} / 4));
  margin-bottom: calc(#{$spacer} / 2);
  color: $gray-700!important;
}

// Legend label
.col-form-label {
  color: $gray-800;
  font-size: $form-label-font-size;
  line-height: $form-line-height;
}

// Bootstrap 4 and bootstrap-vue-next form group spacing
.form-group,
.b-form-group {
  margin-bottom: $spacer * 2;
}

.custom-select,
.form-select,
.form-control,
.input-group-text {
  border-color: $gray-500 !important;
  background-color: $gray-100;
}

.custom-select,
.form-select,
.form-control {
  &:active {
    border: 1px solid $primary!important;
  }
  &:focus {
    color: theme-color("dark");
    background-color: $gray-100;
    box-shadow: inset 0 0 0 3px $gray-100, inset 0 0 0 5px $primary !important;
  }
  &:disabled {
    background-color: $gray-400;
    color: $gray-600;
  }
  &::placeholder {
    color: $gray-600;
  }
  &.is-invalid,
  &:invalid {
    border: 1px solid theme-color("danger") !important;
  }
}

.custom-select,
.form-select,
.custom-control-label,
.form-check-label,
.form-control {
  color: theme-color("dark") !important;
  font-size: 1rem;
}

// Inverted form colors
.form-background {
  background-color: $gray-100;
  .custom-select,
  .form-select,
  .form-control {
    background-color: $white;
    &:focus {
      background-color: $white;
    }
    &:disabled {
      background-color: $gray-400;
      color: $gray-600;
    }
  }
}

.invalid-feedback {
  font-size: $form-label-font-size;
  line-height: $form-line-height;
}

// Checkbox and radio button styling with backward compatibility
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: $black;
  border-color: $black;
  cursor: pointer;
}

.custom-control {
  .custom-control-input[disabled=disabled] {
    & + .custom-control-label {
      // Disabled label for checkbox, radio,
      // switch bootstrap form components
      color: $gray-600!important;
    }
  }
}

.form-check {
  .form-check-input[disabled=disabled] {
    & + .form-check-label {
      // Disabled label for checkbox, radio,
      // switch bootstrap form components
      color: $gray-600!important;
    }
  }
}

.custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: 0 0 0 2px  theme-color("primary");
}

.form-check-input:focus {
  box-shadow: 0 0 0 2px theme-color("primary");
}

.custom-control-label::after,
.form-check-label {
  cursor: pointer;
}

.b-form-tag-remove {
  // X button to remove tag
  font-weight: normal;
}

.b-form-tags-button {
  // Add button inside input field
  white-space: nowrap;
  margin-inline-end: -$spacer;
  &.btn-link-primary {
    color: theme-color("primary");
    fill: currentColor;
  }
}

// Form validation icon
  .form-control.is-invalid,
  .form-control.is-valid {
    background-position: right 1rem bottom 50%;
  }

// Form validation icon with datepicker or password toggle icon
.form-control-with-button {
  &.is-invalid,
  &.is-valid {
    background-position: right 3rem bottom 50%;
  }
}

// Bootstrap 5 form-switch styling for curved toggle switches
.form-switch .form-check-input {
  border-radius: 1.5625rem; // 2em equivalent to match Bootstrap 5's $form-switch-border-radius
}
